<template>
    <div class="personal">
        <Nav :title="title" :path="path"></Nav>
        <div class="content">
            <img src="@/assets/images/avatar/3.png" alt="">
            <div class="user">
                <div class="username">用户名:{{this.$store.state.username}}</div>
                <van-button round type="danger" @click="handleLogOut">登出</van-button>
            </div>
            <van-tabs active="getCollect" v-model="active">
                <van-tab title="收藏夹">
                    <Content :item="collected"></Content>
                </van-tab>
                <van-tab title="历史记录">
                    <Content :item="history"></Content>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
import Content from '../../components/Content.vue'
    export default {
  components: { Content },
        data() {
            return {
                active:0,
                title:'个人中心',
                path:'/tabbar/article',
                collected:[],
                history:[]
            }
        },
        mounted() {
            this.getData('/getCollect','collected')
            this.getData('/getHistory','history')
        },
        methods: {
            getData(url,attr){
                this.$http.get(url).then(res=>{
                    this[attr] = res.data.res
                })
            },
            handleLogOut(){
                this.$http.post('logout').then(()=>{
                    this.$router.push('/login')
                })
            }
        },
    }
</script>

<style>
.personal .content{
    margin-top: 120px;
}
.van-tabs--line .van-tabs__wrap{
    height: 100px;
}
.van-tab__text{
    font-size: 28px;
    height: 80px;
    line-height: 80px;
}
.van-tabs__line{
    width: 100px;
}
.personal .user{
    display: flex;
}
.personal .username{
    font-size: 35px;
    margin-left: 20px;
    margin-top: 20px;
}
.personal .van-button {
    height: 70px;
    font-size: 30px;
    width: 150px;
    margin-left: 300px;
}
</style>